<div class="main">
  <el-row :gutter="20" style="margin-bottom: 20px;">
    <el-col :span="8">
      <div class="table-item">
        <div class="table-item-title flex">
          <span style="width: 75px;">监控视频</span>
          <div class="opearte-div">
            <el-select v-model="value" placeholder="请选择" style="width: 130px;">
              <el-option value="" label="1111"></el-option>
            </el-select>
            <div>
              <el-button type="primary" size="small">播放</el-button>
              <el-button type="primary" size="small">暂停</el-button>
              <el-button type="primary" size="small" icon="el-icon-view" @click="expandVideo()"></el-button>
            </div>
          </div>
        </div>
        <div class="video">
          <img src="http://file06.16sucai.com/2016/0407/589a4d97648483a5792e0f7d823c7383.jpg" style="width:100%;" />
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="table-item">
        <el-carousel indicator-position="none" :loop="false" :interval="100000">
          <el-carousel-item v-for="item in 4" :key="item">
            <div class="img-div">
              <img src="http://file06.16sucai.com/2016/0407/589a4d97648483a5792e0f7d823c7383.jpg" />
            </div>
            <div class="des">
              <span>面积：100亩</span>
              <span>批次：18年曹庄</span>
              <span>负责人：李四</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="table-item">
        <div class="table-item-title">地理位置</div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="margin-bottom: 20px;">
    <el-col :span="8">
      <div class="table-item">
        <div class="table-item-title">数据统计</div>
        <el-table :data="tableData" class="item-table">
          <el-table-column prop="field1"></el-table-column>
          <el-table-column prop="field2" width="180"></el-table-column>
          <el-table-column prop="field3"></el-table-column>
        </el-table>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="table-item">
        <div class="table-item-title">告警信息</div>
        <el-table :data="tableData" class="item-table">
          <el-table-column prop="field1"></el-table-column>
          <el-table-column prop="field2" width="180"></el-table-column>
          <el-table-column prop="field3"></el-table-column>
        </el-table>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="table-item">
        <div class="table-item-title">虫情信息</div>
        <el-table :data="tableData" class="item-table">
          <el-table-column prop="field1"></el-table-column>
          <el-table-column prop="field2" width="180"></el-table-column>
          <el-table-column prop="field3"></el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="margin-bottom: 20px;">
    <el-col :span="8">
      <div class="table-item">
        <div class="table-item-title">实时数据</div>
        <el-table :data="tableData" class="item-table">
          <el-table-column prop="field1"></el-table-column>
          <el-table-column prop="field2" width="180"></el-table-column>
          <el-table-column prop="field3"></el-table-column>
        </el-table>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="table-item">
        <div class="table-item-title">数据分析</div>
        <div class="flex" style="padding: 10px 0">
          <el-radio-group v-model="channel" style="margin-right: 10px;">
            <el-radio-button label="0">今年</el-radio-button>
            <el-radio-button label="1">本周</el-radio-button>
            <el-radio-button label="2">本月</el-radio-button>
          </el-radio-group>
          <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" style="vertical-align: middle;">
          </el-date-picker>
        </div>

        <div ref="echartDiv" style="width: 100%;height: 260px"></div>
      </div>
    </el-col>
  </el-row>
</div>